<template>
  <div class="menus">
    <a-menu v-model:selectedKeys="menuCurrent" mode="horizontal">
      <a-menu-item key="home">
        <router-link to="/home">首页</router-link>
      </a-menu-item>
      <a-menu-item key="signup">
        <router-link to="/signup">我的报名</router-link>
      </a-menu-item>
      <a-menu-item key="user">
        <router-link to="/user">我的信息</router-link>
      </a-menu-item>
    </a-menu>
    <div class="right-bar">
      <a-avatar :size="64" :src="icon">
        <template #icon><UserOutlined /></template>
      </a-avatar>
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          {{ name }}
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:;" @click="logout">退出</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import { DownOutlined, UserOutlined } from "@ant-design/icons-vue";
import { $Http } from "@utils/request.js";
import { getExaminee } from "@apis/user.js";
import { onMounted } from "@vue/runtime-core";
import { $Storage } from "@utils/storage.js";
import router from "@router/index.js";
import { message } from "ant-design-vue";
import { $Store } from "@store/index.js";
export default {
  components: {
    DownOutlined,
    UserOutlined,
  },
  setup() {
    const menuCurrent = ref(["home"]);
    const state = reactive({
      name: "",
      icon: "",
    });

    const API_getExaminee = () => {
      return $Http.request({
        url: getExaminee,
        method: "POST",
      });
    };

    onMounted(async () => {
      let res = await API_getExaminee();
      $Store.commit("user/setUserInfo", res.data.data); //设置用户信息
      state.icon = res.data.data.icon;
      state.name = res.data.data.name;
    });

    const logout = () => {
      $Storage.clear();
      message.success("退出成功");
      router.replace("/");
    };

    return {
      ...toRefs(state),
      menuCurrent,
      logout,
    };
  },
};
</script>

<style scoped>
.menus {
  display: flex;
  justify-content: space-between;
}
</style>